<template>
    <div class="page">
        <el-card class="page-section" :body-style="{ padding: '8px 15px' }" v-if="rolesPermission()<3">
            <div class="section-title">待处理的数据</div>
            <el-row class="page-section__body" :gutter="10">
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <data-card
                        label="待审核的商家总数"
                        :value="systemBoardView.auditView.sellerTotal"
                        icon="sh"
                        background="#3EB2A6"
                    />
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <data-card
                        label="待审核的村民总数"
                        :value="systemBoardView.auditView.peopleTotal"
                        icon="ry3"
                        background="#2AD199"
                    />
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <data-card
                        label="待审核的券"
                        :value="systemBoardView.auditView.couponTotal"
                        icon="yhq"
                        background="#76B69F"
                    />
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <data-card
                        label="待兑换的商品"
                        :value="systemBoardView.auditView.peopleGoodsTotal"
                        icon="shopping"
                        background="#F6A356"
                    />
                </el-col>
            </el-row>
        </el-card>

        <el-card class="page-section" :body-style="{ padding: '8px 15px' }" v-if="rolesPermission()<3">
            <div class="section-title">数据总览</div>
            <el-row class="page-section__body" :gutter="10">
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <data-card
                        label="已入住村民数"
                        :value="systemBoardView.normalView.auditedTotal"
                        icon="peoples"
                        background="#3EB2A6"
                    />
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <data-card
                        label="网格数总数"
                        :value="systemBoardView.normalView.gridTotal"
                        icon="build"
                        background="#F47679"
                    />
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <data-card
                        label="网格员"
                        :value="systemBoardView.normalView.isGridTotal"
                        icon="wgy"
                        background="#F47679"
                    />
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <data-card
                        label="已审核商户数"
                        :value="systemBoardView.normalView.sellerTotal"
                        icon="ic_store_confirm"
                        background="#D6B4B7"
                    />
                </el-col>

            </el-row>
        </el-card>

        <el-card class="page-section" :body-style="{ padding: '8px 15px' }" v-if="rolesPermission()<3" style="display: none">
            <div class="section-title">积分数据</div>
            <el-row class="page-section__body" :gutter="10">
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <data-card
                        label="已放的积分数"
                        :value="systemBoardView.scoreView.total"
                        icon="redis"
                        background="#3EB2A6"
                    />
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <data-card
                        label="已消耗积分数"
                        :value="systemBoardView.scoreView.usedTotal"
                        icon="ysy"
                        background="#F47679"
                    />
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <data-card
                        label="今日发放积分"
                        :value="systemBoardView.scoreView.todaySendTotal"
                        icon="ff"
                        background="#F47679"
                    />
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <data-card
                        label="今日消耗积分"
                        :value="systemBoardView.scoreView.todayUsedTotal"
                        icon="xh"
                        background="#D6B4B7"
                    />
                </el-col>

            </el-row>
        </el-card>
        <el-card class="page-section" :body-style="{ padding: '8px 15px' }">
            <div class="section-title">公益券统计</div>
            <el-row class="page-section__body" :gutter="10">
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <data-card
                        label="创建券总数"
                        :value="systemBoardView.couponView.total"
                        icon="kq"
                        background="#3EB2A6"
                    />
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <data-card
                        label="待使用"
                        :value="systemBoardView.couponView.usedTotal"
                        icon="qwsy"
                        background="#F47679"
                    />
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <data-card
                        label="已使用"
                        :value="systemBoardView.couponView.alreadyTotal"
                        icon="qysy"
                        background="#F47679"
                    />
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <data-card
                        label="已过期"
                        :value="systemBoardView.couponView.expiredTotal"
                        icon="gq"
                        background="#D6B4B7"
                    />
                </el-col>

            </el-row>
        </el-card>

    </div>
</template>

<script>
import DataCard from './DataCard.vue'
import request from "@/utils/request";
import {rolesPermission} from "@/utils/ruoyi";

export default {
    name: 'Dashboard2',
    components: {DataCard},
    data() {
        return {
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            systemBoardView: {
                "auditView": {
                    "sellerTotal": 0,
                    "peopleTotal": 0,
                    "couponTotal": 0,
                    "peopleGoodsTotal": 0
                },
                "normalView": {
                    "auditedTotal": 0,
                    "gridTotal": 0,
                    "isGridTotal": 0,
                    "sellerTotal": 0
                },
                "scoreView": {
                    "total": 0,
                    "usedTotal": 0,
                    "todaySendTotal": 0,
                    "todayUsedTotal": 0
                },
                "couponView": {
                    "total": 0,
                    "usedTotal": 0,
                    "alreadyTotal": 0,
                    "expiredTotal": 0
                }
            }
        };
    },
    created() {
        this.getSystemBoardView();
    },
    methods: {
        rolesPermission,
        handleSetLineChartData(type) {
            this.$emit('handleSetLineChartData', type)
        },
        getSystemBoardView() {
            return request({
                url: '/organization/people/systemBoardView',
                method: 'get',
                params: this.queryScoreDayParams
            }).then(response => {
                this.systemBoardView = response.data;
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.page {
    padding: 12px 16px;
}

.page-section {
    margin-bottom: 12px;

    &__body {
        margin-top: 10px;
    }

    &:last-child {
        margin-bottom: 0;
    }
}

.section-title {
    font-size: 14px;
    line-height: 35px;

    > span {
        line-height: 20px;
        vertical-align: middle;
    }

    &::before {
        content: '';
        display: inline-block;
        width: 6px;
        height: 20px;
        background-color: #2ad199;
        margin-right: 10px;
        vertical-align: middle;
    }
}
</style>
